<template>
  <div class="info">
    <div class="bookmarks"></div>
    <div class="info-top">
      <img
        @mouseenter="avatorMouseEnter"
        @mouseleave="avatorMouseLeave"
        :class="['avator', avatorActive ? 'avatorActiveStart' : 'avatorActiveEnd']"
        :src="
          avatar
            ? avatar
            : 'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=234807691,3908950329&fm=26&gp=0.jpg'
        "
        alt=""
      />
      <p class="name">{{ username }}</p>
    </div>
    <div class="info-middle">
      <div class="info-title" @click="goUserInfo">
        <p>个人详情</p>
        <div class="trangle"></div>
      </div>
      <p>
        前端开发程序员一枚,常年混迹于前端各大社区，
        主要学习技术方向为微信小程序,vue,uniapp,Typescript,React,gulp,webpack,sass等前端领域，
        收藏从未停止，观看从未开始，道阻且长，同志仍需努力。
      </p>
    </div>
    <div class="info-bottom"></div>
  </div>
</template>

<script>
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import bus from '@/bus'
import { detailsObj } from '@/modules/cnode/handleDetails'
export default {
  name: 'PersonData',
  setup(props) {
    const username = ref('')
    const avatar = ref('')
    bus.on('updataInfo', (val) => {
      username.value = val.username.loginname
      avatar.value = val.username.avatar_url
    })
    const user = JSON.parse(sessionStorage.getItem('detailsObj'))
    if (!username.value) {
      username.value = user ? user.author.loginname : '用户'
    }
    if (!avatar.value) {
      avatar.value = user ? user.author.avatar_url : ''
    }

    let avatorActive = ref(false)
    function avatorMouseEnter() {
      avatorActive.value = true
    }
    function avatorMouseLeave() {
      avatorActive.value = false
    }

    const router = useRouter()
    function goUserInfo() {
      sessionStorage.setItem('UserInfo', username.value)
      router.push({
        name: 'UserInfo',
        params: {
          user: username.value,
        },
      })
    }
    return {
      avatorActive,
      username,
      avatar,
      goUserInfo,
      avatorMouseEnter,
      avatorMouseLeave,
    }
  },
}
</script>

<style scope lang="scss">
.info {
  width: 300px;
  height: 50vh;
  background: linear-gradient(to bottom, rgb(75, 183, 197), rgb(90, 199, 163), rgb(75, 180, 200));
  margin: 30px;
  box-sizing: border-box;
  padding: 5px 10px;
  position: relative;
  overflow: hidden;
  .bookmarks {
    position: absolute;
    top: 0px;
    right: -32px;
    transform: rotate(45deg);
    width: 130px;
    height: 20px;
    background: rgb(233, 71, 71);
  }
  .info-top {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .avator {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 20px auto;
  }
  .name {
    margin-top: -10px;
    color: rgb(243, 243, 230);
    font-style: 14px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  .info-middle {
    width: 100%;
    margin-top: 5vh;
    font-style: 14px;
    text-align: left;
    word-break: break-all;
    color: #fff;
    position: relative;
    .info-title {
      width: 80%;
      height: 5vh;
      background-image: linear-gradient(to right, #fff 10%, rgb(230, 192, 135) 90%);
      color: #333;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
      text-align: center;
      line-height: 5vh;
      &::before {
        position: absolute;
        top: 0;
        left: 20px;
        width: 1px;
        height: 5vh;
        background: gray;
        content: '';
      }
      &::after {
        position: absolute;
        top: 0;
        right: 55px;
        width: 1px;
        height: 5vh;
        background: gray;
        content: '';
      }
    }
    .trangle {
      width: 0;
      height: 0;
      position: absolute;
      right: 0;
      top: 0;
      border-top: 25px solid transparent;
      border-bottom: 26px solid transparent;
      border-left: 55px solid rgb(230, 192, 135);
      border-right: 0px solid transparent;
    }
  }
  & :first-child {
    text-align: center;
  }
}

@keyframes aniS {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(720deg);
  }
}
@keyframes aniE {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.avatorActiveStart {
  animation: aniS 0.5s;
}
.avatorActiveEnd {
  animation: aniE 0.5s;
}
</style>